<template>
  <div class="search_pages">
    <SearchHeader/>
    <div class="hot_search">
      <div>音乐风格</div>
      <div>
        <ul>
          <v-touch
            v-for="(item,key) in searchStyle"
            :key="key"
            tag="li"
            @tap="handleSearchList(item.value)"
          >{{item.value}}</v-touch>
        </ul>
      </div>
    </div>
     <!-- <div class="clear_search" v-if="historyList.length>0?true:false">
      <div>历史记录</div>
      <div>
        <ul>
          <v-touch 
            v-for="(item,index) in historyList" 
            :key="index"
            @tap="handleSearchList(item)"
             tag="li"
            >{{item}}</v-touch >
        </ul>
      </div>
      <v-touch @tap="handleClearHistory">清除搜索记录</v-touch>
    </div> -->
  </div>
</template>

<script>
import { searchStyle } from "./index.js";
import SearchHeader from "./header.vue";
export default {
  name: "search",
  data() {
    return {
      searchStyle: []
    };
  },
  components: {
    SearchHeader
  },
  created() {
    this.getHotList();
  },
methods: {
    async getHotList() {
      let data = await searchStyle();
      this.searchStyle = data.result[0].tags;
      console.log(this.searchStyle);
    },
      handleSearchList(item){
        console.log(item)
      this.$router.push("/searchList/"+item).catch(err => {err});
  
    },
  }
};
</script>

<style>
.hot_search {
  background: #fff;
  padding: 0.4rem 0.2rem;
}
.hot_search > div:nth-child(1) {
  font-size: 0.4rem;
}

.hot_search > div:nth-child(2) ul {
  display: flex;
  flex-wrap: wrap;
}
.hot_search > div:nth-child(2) ul li {
  padding: 0.14rem 0.16rem;
  background: #f1f1f1;
  margin-top: 0.4rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  font-size: 0.25rem;
  border-radius: 10px;
}
</style>